<template>
    <div>
      <div class="book-title">
        <img class="img" :src="cover" alt="">
        <h1>{{title}}</h1>
        <h2 style="margin-right: 5px;color: #999;color: rgba(0,0,0,.4);font-size: 14px">{{author}}&nbsp著</h2>
        <br>
        <br>
        <br>
        <el-row>
          <el-col span="8" style="font-size: 20px">{{type}}</el-col>
          <el-col span="8" style="font-size: 20px">{{date}}</el-col>
          <el-col span="8" style="font-size: 20px">{{press}}</el-col>
        </el-row>
        <br>
        <el-row>
          <el-col span="8" style="font-size: 14px;color: rgba(0,0,0,.4)">类型</el-col>
          <el-col span="8" style="font-size: 14px;color: rgba(0,0,0,.4)">上架</el-col>
          <el-col span="8" style="font-size: 14px;color: rgba(0,0,0,.4)">出版社</el-col>
        </el-row>
      </div>
      <div class="book-content">
        <Iframe :src="resource" width="100%"  height="100%" scrolling="Auto" frameborder="0"></iframe>
      </div>
    </div>
</template>

<script>
import uMessage from '@/store'
import content from  '@/store'
export default {
  name: 'Show',
  data () {
    return{
      txt: uMessage.state.txt,
      title: content.state.title,
      author: content.state.author,
      date: content.state.date,
      type: content.state.type,
      cover: content.state.cover,
      resource: content.state.resource,
      press: content.state.press
    }
  }
}
</script>

<style scoped>
.book-title{
  height: 662px;
  margin: 8px;
  width: 750px;
  margin-left: 30%;
  text-align: center;
  border: 5px solid #d8d8d8;
  background: #f7f5f0;
}
.img{
  height: 160px;
  width: 120px;
  margin-top: 75px;
}
.book-content{
  margin: 8px;
  width: 750px;
  height: 800px;
  margin-left: 30%;
  text-align: center;
  border: 5px solid #d8d8d8;
  background: #f7f5f0;
}
</style>
